<!--
 * @Author: lmk
 * @Date: 2022-04-16 11:37:44
 * @LastEditTime: 2022-06-29 16:25:18
 * @LastEditors: lmk
 * @Description: 
-->
<template>
  <div class="music" @click="detail"  :class="music.activityType===2 ? 'unActive': ''">
    <img :src="music.activitiFiguerImage" alt="" class="music-image">
    <p class="truncate name">{{isZh ? music.activityName : music.activityNameEnglish}}</p>
    <p  class="truncate info">{{descTxt}}</p>
    <div class="flex address-view">
      <img src="/img/home/address.png" alt="" class="address-img">
      <span class="address self-center">{{isZh ? music.activityAddress : music.activityAddressEnglish}}</span>
    </div>
    <img src="/img/home/musicItem.png" alt="" class="item-line">
    <p  class="time">
      <span>{{musicTime.day}}</span>
      <span>{{musicTime.week}}</span>
      <span>{{musicTime.min}}</span>
      <span>{{musicTime.year}}</span>
    </p>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { useIsZh } from '@/utils/useIsZh'
import { getElementText } from '@/utils'
import { useRouter } from 'vue-router'
export default {
  props: {
    music: {
      type: Object,
      default: () => {
        return {
          "activitiFiguerImage": "string", // 活动封面图 ,
          "activityAddress": "string", // 活动地址 ,
          "activityAddressEnglish": "string", 
          "activityCrrateTime": "2022-04-17T13:07:06.944Z", //  活动创建时间 ,
          "activityDesc": "string", // 活动详情 ,
          "activityDescEnglish": "string",
          "activityId": 0,
          "activityName": "string", //  活动名称 
          "activityNameEnglish": "string",
          "activityShowTime": "2022-04-17T13:07:06.944Z", // 演出时间 ,
          "activityStatus": 0, // 活动状态（1 有效 2 无效） , 
          "activityType": 0 // 活动类型（1 未开始活动 2 往期详情）
        }
      }
    }
  },
  setup(props){
    const {isZh} = useIsZh()
    const router = useRouter()
    const detail = ()=>{
      router.push(`/activityDetail/${props.music.activityId}`)
    }
    return {isZh,detail}
  },
  computed: {
    musicTime() {
      // return this.music.activityShowTime.map(val=>{
      //   const year = dayjs(val).format('YYYY')
      //   const min = dayjs(val).format('HH:mm')
      //   const week = dayjs(val).format('ddd')
      //   const day = dayjs(val).format('MM-DD')
      //   return {year,min,week,day}
      // })
      const activityShowTime = this.music.activityShowTime
      const year = dayjs(activityShowTime).format('YYYY')
      const min = dayjs(activityShowTime).format('HH:mm')
      const week = dayjs(activityShowTime).format('ddd')
      const day = dayjs(activityShowTime).format('MM-DD')
      const weekZh = ['周日','周一','周二','周三','周四','周五','周六']
      const weekStr = this.isZh ? `${weekZh[dayjs(activityShowTime).format('d')]}` : week
      return {year,min,week:weekStr,day}
    },
    descTxt(){
      return this.isZh ? getElementText(this.music.activityDesc) : getElementText(this.music.activityDescEnglish)
    }
  }
}
</script>

<style lang="scss">
.unActive{
  filter: grayscale(100%);
}
@media screen and (min-width: 1400px) {
  .music{
    line-height: 1;
    cursor: pointer;
    &-image{
      object-fit: cover;
      display: block;
      margin-bottom: 21px;
      border: 1px solid $activeTxt;
      width: 100%;
      height: calc((100vw - 160px - 4px) / 4 * 0.65);
    }
    .name{
      font-size: 18px;
      font-weight: bold;
      color: #FFFFFF;
    }
    @mixin music-info{
      font-size: 14px;
      font-weight: bold;
      color: #999999;
    }
    .info{
      @include music-info;
      margin-top: 24px;
    }
    .address{
      @include music-info;
      padding-left: 14px;
    }
    .address-img{
      width: 17px;
      height: 24px;
      display: block;
    }
    .address-view{
      margin-top: 24px;
      
    }
    .item-line{
      height: 1px;
      width: 100%;
      display: block;
      margin-top: 20px;
      margin-bottom: 12px
    }
    .time{
      @include music-info;
      margin-top: 8px;
      span{
        display: inline-block;
        margin-right: 20px;
      }
    }
  }
}
@media screen and (max-width: 1401px) {
  .music{
    line-height: 1;
    cursor: pointer;
    margin-bottom: 16px;
    &-image{
      object-fit: cover;
      display: block;
      margin-bottom: 21px;
      border: 1px solid $activeTxt;
      width: 100%;
      height: calc((100vw - 15px - 2px) / 2 * 0.65);
      box-shadow: 0px 2px 3px 1px rgba(255,255,255,0.2);
    }
    .name{
      font-size: 9px;
      font-weight: bold;
      color: #FFFFFF;
    }
    @mixin music-info{
      font-size: 7px;
      font-weight: bold;
      color: #999999;
    }
    .info{
      @include music-info;
      margin-top: 12px;
    }
    .address{
      @include music-info;
      padding-left: 7px;
    }
    .address-img{
      width: 8px;
      height: 12px;
      display: block;
    }
    .address-view{
      margin-top: 10px;
    }
    .item-line{
      height: 1px;
      width: 100%;
      display: block;
      margin-top: 10px;
    }
    .time{
      @include music-info;
      margin-top: 8px;
      span{
        display: inline-block;
        margin-right: 10px;
      }
    }
  }
}

</style>